<template>
  <view class="my-empty">
    <up-empty
      :icon="currentType.icon"
      :text="text ? text : currentType.text"
      :marginTop="marginTop"
    >
      <slot></slot>
    </up-empty>
  </view>
</template>

<script setup>
import { computed } from "vue";

const porps = defineProps({
  type: {
    type: String,
    default: "data",
  },
  text: {
    type: String,
    default: "",
  },
  marginTop: {
    type: String,
    default: "100px",
  },
});

const typeMap = {
  data: {
    icon: "/static/images/icon/empty-data.png",
    text: "暂无数据，请稍后重试",
  },
  cart: {
    icon: "/static/images/icon/empty-cart.png",
    text: "购物车为空，去逛逛吧",
  },
  collect: {
    icon: "/static/images/icon/empty-collect.png",
    text: "收藏夹为空，去逛逛吧",
  },
  order: {
    icon: "/static/images/icon/empty-order.png",
    text: "暂无订单，去逛逛吧",
  },
  search: {
    icon: "/static/images/icon/empty-search.png",
    text: "暂无搜索结果，换个关键词试试",
  },
  wallet: {
    icon: "/static/images/icon/empty-wallet.png",
    text: "暂无余额，去充值吧",
  },
  coupon: {
    icon: "/static/images/icon/empty-coupon.png",
    text: "暂无优惠券",
  },
  activity: {
    icon: "/static/images/icon/empty-activity.png",
    text: "暂无活动",
  },
};

const currentType = computed(() => {
  return typeMap[porps.type];
});
</script>

<style lang="scss" scoped>
.my-empty {
  overflow: hidden;
}
</style>
